import React, { memo, useEffect } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import "./index.scss";

import recommendActions from "store/action/recommend";
import HYThemeHeaderSmall from "components/theme-header-small";
import { getSizeImage } from "@/utils/format-utils";

const WYSettleSinger = memo(function (props) {
  // redux数据
  const dispatch = useDispatch();
  const artistList = useSelector(
    (state) => state.getIn(["recommend", "artistList"]),
    shallowEqual
  );
  useEffect(() => {
    dispatch(recommendActions.getArtistList());
  }, [dispatch]);

  return (
    <div className="re-settle-singer">
      <HYThemeHeaderSmall title="入驻歌手" more="查看全部" />
      <div className="singer-list">
        {artistList.map((item, index) => (
          <a href="/singer" className="item" key={index}>
            <img
              src={getSizeImage(item.picUrl,62)}
              alt=""
            />
            <div className="info">
              <div className="title">{item.name}</div>
              <div className="name">{item.alias.length>0?item.alias[0]:item.name}</div>
            </div>
          </a>
        ))}
        <div className="apply-for">
          <a href="/abc">申请成为网易音乐人</a>
        </div>
      </div>
    </div>
  );
});

export default WYSettleSinger;
